styles = """
/*
 * "a blessing letter💗" v1.2.2
 * for every true lover
 */

body {
  background-color: #1a1c24; color: #fff;
  font-size: 1.0rem; line-height: 1.4;
  -webkit-font-smoothing: subpixel-antialiased;
}

/*
 * ...hello?            
 *
 * 谷风？xmy？还是喊你宝贝呢！
 * 新年快乐啦～
 * 给你挑礼物也确实困难（可恶啊）
 * 既要礼轻（让你没有那方面压力）又要情义重（为难我？你小子）！
 * 25岁母胎单身大龄老直男（deBuff拉满了啊喂）陷入沉思（彻夜难眠地想）
 * 不过无所谓啦谁让牛油果喜欢你呢 ๑乛◡乛๑
 * 斟酌再三决定给你留段新年祝福（话说有人给你部署过web吗？哈哈！！）
 * 叠甲呜呜要是觉得写的不好（很土、尴尬肉麻之类的）别看关了也行呜呜（服务器还有一年）
 * 更新补充：被你猜到了可恶啊呜呜呜(你也太聪明了吓到了)
 * 更新补充：但是为了让你保持期待（和回家的负面情绪抵消）吊你几天抱歉～
 */

pre { 
  position: fixed;
  top: 30px; bottom: 30px;
  transition: left 300ms;
  overflow: auto;
  background-color: #313744; color: #a6c3d4;
  border: 1px solid rgba(0,0,0,0.2);
  padding: 24px 12px;
  box-sizing: border-box;
  border-radius: 3px;
  box-shadow: 0px 4px 0px 2px rgba(0,0,0,0.1);
}


/*
 * 至于为啥要给你这东西呢(‧_‧?)
 * 大概也是前几天听你说每个人过年都很开心（拔牙的🥑：(´･ω･`)?）
 * 而你并不快乐(不允许的！🥑：〒▽〒 )
 * 听你说完我真的心如刀绞，心痛死我了
 * 迫切希望能够改善下宝贝的过年情绪（毕竟大节日哦，要和大家一样开心）
 * 今年准备时间仓促，来年一定更好！（画饼ing，宝贝好好期待着每个春节吧）
 */

/*
 * 你知道吗？”快乐“之所以让人舒适，是因为大脑会释放多巴胺
 * 你经常说和我一起聊聊天能让你感到开心（🥑：ヾ(≧▽≦*)o  ）
 * 虽说我无法替代亲情（心疼你宝贝）
 * 但是如果我能让你稍稍有那么一分开心，是不是也让你大脑释放了多巴胺
 * 这样也算殊途同归了吧哈哈，给我开心点！(❁´◡`❁)
 * 希望以后你不要去在意那些不好的话啦～
 * 何须浅碧深红色,自是花中第一流。
 * 你自身本来很棒很优秀，
 * 不需要其他人的认可也是优秀！
 */

pre em:not(.comment) { font-style: normal; }

.comment       { color: #707e84; }
.selector      { color: #c66c75; }
.selector .key { color: #c66c75; }
.key           { color: #c7ccd4; }
.value         { color: #d5927b; }


/*
 * 还是更习惯把代码框放在右边 →_→
 * 你呢左or右还是不分屏哈哈～（话题突然偏离）
 * 好了继续～
 */

pre { left: 50%; width: 45%}


/* 
 * 笨蛋～所以不要不开心！ ( ´･ω･)ﾉ(._.`)
 * 多巴胺获取渠道多着呢！
 * 喜欢你，爱着你的人很多很多哦～（包括但不限于🥑）
 * 不信你往下看～
 */

#heart, #echo {
  position: fixed;
  width: 300px; height: 300px;
  top: calc(50% - 150px); left: calc(25% - 150px);
  text-align: center;
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

#heart { z-index: 8; }
#echo  { z-index: 7; }

#heart::before, #heart::after, #echo::before, #echo::after {
    content: '';
    position: absolute;
    top: 40px;
    width: 150px; height: 240px;
    background: #c66c75;
    border-radius: 150px 150px 0 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
}

#heart::before, #echo::before {
  left: 150px;
}

#heart::after, #echo::after {
  left: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}


/* 你问我爱你有多深，代码代表我的心 (●′ω`●) */

#heart::after { 
  box-shadow:
    inset -6px -6px 0px 6px rgba(255,255,255,0.1);
}

#heart::before { 
  box-shadow:
    inset 6px 6px 0px 6px rgba(255,255,255,0.1);
}


/* 现在我的心属于你啦～ */

#heart i::before {
  content: '谷风';
  position: absolute;
  z-index: 9;
  width: 100%;
  top: 35%; left: 0;
  font-style: normal;
  color: rgba(255,255,255,0.8);
  font-weight: 100;
  font-size: 30px;
  text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}


/* 
 * 我们认识的时间虽不长，
 * 但和你相处真的很开心，
 * 外加相近的性格、爱好、出生日期，甚至相同的职业，
 * 以及初次见到你时我的心率，这一切都在告诉我～
 * 我喜我生，独丁斯时。
 * 喜欢你宝贝！
 */

@-webkit-keyframes heartbeat {
  0%, 100% { 
    -webkit-transform: scale(0.95); 
            transform: scale(0.95); 
  }
  50% { 
    -webkit-transform: scale(1.00); 
            transform: scale(1.00); 
  }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(0.95); }
  50%      { transform: scale(1.00); }
}

@-webkit-keyframes echo {
  0%   { 
    opacity: 0.1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% { 
    opacity: 0;
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
}

@keyframes echo {
  0%   { 
    opacity: 0.1;
    transform: scale(1);
  }
  100% { 
    opacity: 0;
    transform: scale(1.4);
  }
}


/* 
 * 什么？没听到我的心跳？           
 * 明明心率100+！！！
 * 你再靠近一点
 */

#heart, #echo {
  -webkit-animation-duration: 500ms;
          animation-duration: 500ms;
  -webkit-animation-timing-function: 
    cubic-bezier(0, 0, 0, 1.74);
          animation-timing-function: 
            cubic-bezier(0, 0, 0, 1.74);
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

#heart { 
  -webkit-animation-name: heartbeat; 
          animation-name: heartbeat; 
}
#echo { 
  -webkit-animation-name: echo; 
          animation-name: echo; 
}

/* 
 * 你靠这么近干嘛～           
 */

#heart, #echo {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

/* 
 * 我都脸红了～嘿嘿        
 * （听到了吧）
 */

/* 
 * 这颗功率120的小心心送你 `(*^﹏^*)′
 * 新年快乐 ～宝贝～
 * 至此题外话也结束（原谅我的垃圾文笔+刚学的扣脚前端）
 * 废话很多正题很短：
 * 新年快乐！！！
 * 不对是天天快乐！！！
 * （给爷笑一个？bushi）
 * 岁岁春无事，相逢总玉颜~
 * 旦逢良辰，顺颂时宜~
 * （财源广进，早生贵....?阿巴阿巴开始胡说八道哈哈哈）
 * 好好过年宝贝不开心的话找🥑
 * 果形影不离（不只是过年，永远都是）～～～
 */
"""

openComment = false

writeStyleChar = (which) ->
	# begin wrapping open comments
  if which == '/' && openComment == false
    openComment = true
    styles = $('#style-text').html() + which
  else if which == '/' && openComment == true
    openComment = false
    styles = $('#style-text').html().replace(/(\/[^\/]*\*)$/, '<em class="comment">$1/</em>')
  # wrap style declaration
  else if which == ':'
    styles = $('#style-text').html().replace(/([a-zA-Z- ^\n]*)$/, '<em class="key">$1</em>:')
  # wrap style value 
  else if which == ';'
    styles = $('#style-text').html().replace(/([^:]*)$/, '<em class="value">$1</em>;')
  # wrap selector
  else if which == '{'
    styles = $('#style-text').html().replace(/(.*)$/, '<em class="selector">$1</em>{')
  else
    styles = $('#style-text').html() + which
  $('#style-text').html styles
  $('#style-tag').append which

writeStyles = (message, index, interval) ->
  if index < message.length
    pre = document.getElementById 'style-text'
    pre.scrollTop = pre.scrollHeight
    writeStyleChar message[index++]
    setTimeout (->
      writeStyles message, index, if openComment then 60 else 5
    ), interval
    

# appending the tags I'll need.
$('body').append """
  <style id="style-tag"></style>
	<span id="echo"></span>
	<span id="heart"><i></i></span>
	<pre id="style-text"></pre>
"""

# faster typing in small iframe on codepen homepage
# time = if window.innerWidth <= 578 then 4 else 16
time = 600

# starting it off
writeStyles(styles, 0, time)

###
Changelog:
1.0.0: i exist!
1.0.1: heart instead of circle
1.0.2: including standard CSS3 transforms and animations
	was only using `-webkit` to be less verbose (standard transforms dont work in safari)
	now works in FF
1.0.3: crossbrowser echo 
	nested `scale()` styles (scaled in scaled) only worked in chrome
	moved echo out of heart to fix
1.0.4: more efficient animations
	`0%, 100% {}` instead of duplicated keyframes
1.0.5: overflwo fix
  `overflow: auto` on the `pre`
###